<template>
    <div class="container">
        
        <h4 class="title">{{ newsInfo.title }}</h4>

        <p class="submit">
            <span>发表时间：{{ newsInfo.add_time | dateFormat }}</span>
            <span>点击：{{ newsInfo.click }}次</span>
        </p>

        <hr>
        <!-- 内容 -->
        <div v-html="newsInfo.content" class="content"></div>

        <!-- 评论子组件 -->
        <comment-box :id="$route.params.id"></comment-box>
    </div>
</template>

<script>

import { Toast } from "mint-ui";
//导入评论组件
import comment from '../subComponent/comment.vue';

    export default {
        data() {
            return {
                newsInfo: {}
            }
        },
        created() {
            this.getNewsInfo();
        },
        methods: {
            getNewsInfo() {

                //获取ID
                var id = this.$route.params.id;
                this.$http.get("api/getnew/" + id).then(result=> {
                    if(result.body.status === 0) {
                        //将数据存储在数组中
                        //console.log(result.body);
                        this.newsInfo = result.body.message[0];
                    }else {
                        Toast("获取新闻失败！")
                    }
                })
            }
        },
        components:  {//注册自己的私有组件
            "comment-box": comment
        } 

    }
</script>

<style lang="scss">
.container {
    padding: 5px;

    .title {
    font-size: 14px;
    text-align: center;
    color: red;
}
.submit {
    font-size: 12px;
    color: blue;
    display: flex;
    margin-top: 15px;
    justify-content: space-between;
}
.content {
    img {
        width: 100%;
    }
}
}

</style>
